<script setup>
import { ref } from 'vue';
import getStatusHeight from '/utils/getStatusHeight.js';
import {onLoad} from '@dcloudio/uni-app';
import * as Api from '/api/papers';
const {statusBarHeight,topBarHeight } = getStatusHeight()
const banners = ref([
  '/static/images/pic2.png',
]);
const goPaper= (id,title) => {
  uni.navigateTo({
    url: `/pages/index/paper?id=${id}&title=${title}`
  })
}
const goHearing= () => {
  uni.navigateTo({
    url: '/pages/index/hearing'
  })
}
const goReading= () => {
  uni.navigateTo({
    url: '/pages/index/reading'
  })
}
const goWriting= () => {
  uni.navigateTo({
    url: '/pages/index/writing'
  })
}
function getToday() {
  const today = new Date();
  const year = today.getFullYear();
  const month = String(today.getMonth() + 1).padStart(2, '0');
  const day = String(today.getDate()).padStart(2, '0');

  return `${year}-${month}-${day}`;
}
let papersList = ref([])
onLoad(async ()=>{
  if (uni.getStorageSync('qd')){
    if (uni.getStorageSync("qd") !== getToday()){
      uni.setStorageSync('time',0)
    }
  }else {
    uni.setStorageSync('time',0)
    uni.setStorageSync('qd1',0)
  }
  let res = await Api.getList()
  papersList.value = res.data
})
let time = (Number(uni.getStorageSync('time'))/60).toFixed(0)
let qd1 = uni.getStorageSync('qd1')
</script>

<template>
  <view :style="{'padding-top': statusBarHeight+'px',height: +topBarHeight+'px'}" style="background-color: white;display: flex;align-items: center;justify-content: flex-start;gap: 20rpx">
      <view style="font-weight: bold;font-style: italic;font-size: 46rpx;margin-left: 20rpx">CET-4</view><view style="background-color: #0AD192;width: 40rpx;height: 40rpx;border-radius: 50%;display: flex;align-items: center;justify-content: center"><van-icon name="exchange" size="12" color="white"/></view>
  </view>
  <scroll-view scroll-y="true" class="container" style="width: calc(100vw - 40rpx)" :style="{height: 'calc(100vh - '+statusBarHeight+'px - '+topBarHeight+'px - 40rpx)'}">
    <view style="background: linear-gradient(to bottom, #CBFFEF 0%, #ffffff 50%);width: 100%;border-radius: 12rpx;border: 2px solid white;display: flex;flex-direction: column;gap: 20rpx">
    <view style="display: flex;align-items: center;justify-content: space-between;padding: 30rpx">
      <view>
        <view style="font-family: Algerian;font-weight: bold;position: relative;top: 15rpx">学习数据</view>
        <view style="width: 100rpx;height: 16rpx;border-radius: 30rpx;background-color: #f3cd66;"></view>
      </view>
      <van-button icon="replay" size="small" round plain hairline type="primary">重置数据</van-button>
    </view>
    <view style="display: flex;align-items: center;justify-content: space-around">
      <view style="display: flex;flex-direction: column;align-items: center;gap: 10rpx">
        <view style="font-weight: lighter;display: flex;align-items: baseline;line-height: 20rpx;font-family: 'Microsoft Himalaya';font-size: 45rpx"><view style="font-size: 40rpx;font-family: 'Lucida Bright';font-weight: bold;margin-right: 4rpx">{{time}}</view>min</view>
        <view style="font-family: 'Microsoft Himalaya';font-size: 26rpx">今日学习</view>
      </view>
      <view style="display: flex;flex-direction: column;align-items: center;gap: 10rpx">
        <view style="font-weight: lighter;display: flex;align-items: baseline;line-height: 20rpx;font-family: 'Microsoft Himalaya';font-size: 45rpx"><view style="font-size: 40rpx;font-family: 'Lucida Bright';font-weight: bold;margin-right: 4rpx">{{qd1}}</view>day</view>
        <view style="font-family: 'Microsoft Himalaya';font-size: 26rpx">连续打卡</view>
      </view>
      <view style="display: flex;flex-direction: column;align-items: center;gap: 10rpx">
        <view style="font-weight: lighter;display: flex;align-items: baseline;line-height: 20rpx;font-family: 'Microsoft Himalaya';font-size: 45rpx"><view style="font-size: 40rpx;font-family: 'Lucida Bright';font-weight: bold;margin-right: 4rpx">{{qd1}}</view>day</view>
        <view style="font-family: 'Microsoft Himalaya';font-size: 26rpx">累计打卡</view>
      </view>
    </view>
      <van-divider custom-style="width: 600rpx;margin: 0 auto"/>
      <view style="display: flex;align-items: center;justify-content: space-around;padding: 10rpx;gap: 10rpx">
<!--        <view style="display: flex;align-items: center">-->
<!--          <image src="/static/cuoti.png" style="width: 80rpx;height: 80rpx"></image>-->
<!--          <view style="font-family: 'Microsoft Himalaya';font-size: 26rpx">我的错题</view>-->
<!--        </view>-->
<!--        <view style="display: flex;align-items: center">-->
<!--          <image src="/static/sc.png" style="width: 80rpx;height: 80rpx"></image>-->
<!--          <view style="font-family: 'Microsoft Himalaya';font-size: 26rpx">我的收藏</view>-->
<!--        </view>-->
<!--        <view style="display: flex;align-items: center">-->
<!--          <image src="/static/jl.png" style="width: 80rpx;height: 80rpx"></image>-->
<!--          <view style="font-family: 'Microsoft Himalaya';font-size: 26rpx">我的记录</view>-->
<!--        </view>-->

      </view>
    </view>
    <view style="display: flex;justify-content: space-between;align-items: center;margin-top: 30rpx">
      <view style="position: relative" @click="goHearing">
        <image src="/static/hearing.png" style="width: 240rpx;height: 280rpx"></image>
        <view style="color: white;position: absolute;bottom: 40rpx;left: 50rpx">
          <view style="font-weight: bold;font-size: 40rpx">听力</view>
          <view style="font-size: 24rpx">Hearing</view>
        </view>
      </view>
      <view style="position: relative" @click="goReading">
        <image src="/static/reading.png" style="width: 240rpx;height: 280rpx"></image>
        <view style="color: white;position: absolute;bottom: 40rpx;left: 50rpx">
          <view style="font-weight: bold;font-size: 40rpx">阅读</view>
          <view style="font-size: 24rpx">Rearing</view>
        </view>
      </view>
      <view style="position: relative" @click="goWriting">
        <image src="/static/xy.png" style="width: 240rpx;height: 280rpx"></image>
        <view style="color: white;position: absolute;bottom: 40rpx;left: 50rpx">
          <view style="font-weight: bold;font-size: 40rpx">写译</view>
          <view style="font-size: 24rpx">Writing</view>
        </view>
      </view>
    </view>
    <!-- 轮播图 -->
    <swiper class="swiper" autoplay circular indicator-dots>
      <swiper-item v-for="(item, index) in banners" :key="index">
        <image :src="item" mode="aspectFill" class="swiper-image" />
      </swiper-item>
    </swiper>

    <!-- 真题 -->
    <view class="section">
      <view style="display: flex;align-items: center">
        <view style="width: 8rpx;height: 40rpx;background-color: #0AD192;border-radius: 80rpx"></view>
        <view style="font-weight: bold;font-size: 34rpx;margin-left: 10rpx">真题整卷</view>
      </view>
    </view>
    <scroll-view scroll-x="true" style="height: 50rpx;margin: 20rpx 0;white-space: nowrap;">
      <view style="margin: 0 10rpx;display: inline-block;background-color: white;border-radius: 10rpx;width: 100rpx;text-align: center;font-size: 26rpx;padding: 8rpx;line-height: 30rpx">
        全部
      </view>
      <view style="margin: 0 10rpx;display: inline-block;background-color: white;border-radius: 10rpx;width: 100rpx;text-align: center;font-size: 26rpx;padding: 8rpx;line-height: 30rpx">
        2024
      </view>
      <view style="margin: 0 10rpx;display: inline-block;background-color: white;border-radius: 10rpx;width: 100rpx;text-align: center;font-size: 26rpx;padding: 8rpx;line-height: 30rpx">
        2023
      </view>
      <view style="margin: 0 10rpx;display: inline-block;background-color: white;border-radius: 10rpx;width: 100rpx;text-align: center;font-size: 26rpx;padding: 8rpx;line-height: 30rpx">
        2022
      </view>
      <view style="margin: 0 10rpx;display: inline-block;background-color: white;border-radius: 10rpx;width: 100rpx;text-align: center;font-size: 26rpx;padding: 8rpx;line-height: 30rpx">
        2021
      </view>
      <view style="margin: 0 10rpx;display: inline-block;background-color: white;border-radius: 10rpx;width: 100rpx;text-align: center;font-size: 26rpx;padding: 8rpx;line-height: 30rpx">
        2020
      </view>
      <view style="margin: 0 10rpx;display: inline-block;background-color: white;border-radius: 10rpx;width: 100rpx;text-align: center;font-size: 26rpx;padding: 8rpx;line-height: 30rpx">
        2019
      </view>
      <view style="margin: 0 10rpx;display: inline-block;background-color: white;border-radius: 10rpx;width: 100rpx;text-align: center;font-size: 26rpx;padding: 8rpx;line-height: 30rpx">
        2018
      </view>
      <view style="margin: 0 10rpx;display: inline-block;background-color: white;border-radius: 10rpx;width: 100rpx;text-align: center;font-size: 26rpx;padding: 8rpx;line-height: 30rpx">
        2017
      </view>
      <view style="margin: 0 10rpx;display: inline-block;background-color: white;border-radius: 10rpx;width: 100rpx;text-align: center;font-size: 26rpx;padding: 8rpx;line-height: 30rpx">
        2016
      </view>
    </scroll-view>
    <scroll-view scroll-y="true" style="min-height: 240rpx;max-height: 560rpx">
<!--      <view style="margin: 14rpx 0;padding: 10rpx 20rpx;border-radius: 10rpx;height: 140rpx;background-color: white;display: flex;flex-direction: column;justify-content: space-around">-->
<!--        <view style="color: #3F536E">2024年6月四级真题第三套</view>-->
<!--        <view style="display: flex;justify-content: flex-start;gap: 20rpx;color: #808080;font-size: 24rpx"><text>总题数: 57</text><text>考试时间: 125分钟</text><text>总分: 710分</text></view>-->
<!--      </view>-->
      <view @click="goPaper(item.id,item.title)" v-for="item in papersList" style="margin: 14rpx 0;padding: 10rpx 20rpx;border-radius: 10rpx;height: 140rpx;background-color: white;display: flex;flex-direction: column;justify-content: space-around">
        <view style="color: #3F536E">{{item.title}}</view>
        <view style="display: flex;justify-content: flex-start;gap: 20rpx;color: #808080;font-size: 24rpx"><text>总题数: 57</text><text>考试时间: 125分钟</text><text>总分: 710分</text></view>
      </view>
    </scroll-view>

  </scroll-view>

</template>


<style scoped>
.container {
  background-color: #F6F8FC;
  padding:20rpx;

}

.swiper {
  height: 120rpx;
  border-radius: 10px;
  overflow: hidden;
  margin-top: 20rpx;
}

.swiper-image {
  width: 100%;
  height: 100%;
}

.section {
  margin-top: 20px;
}

.scroll-view_H {
  white-space: nowrap;
  width: 100%;
}

.scroll-view-item_H {
  display: inline-block;
  width: 100%;
  height: 300rpx;
  line-height: 300rpx;
  text-align: center;
  font-size: 36rpx;
}
</style>